<template>
  <div class="totalAssets">
    <x-header :left-options="{backText: ''}"></x-header>
    <div class="backProduct" @click="$router.push({path:'/main/returnMoney'})">
      已回款产品
    </div>
    <div class="total">
      <div style="font-size: 20px;">总资产</div>
      <div style="font-size:25px">¥{{all}}</div>

      <div class="garden" style="position: relative">
        <div style="width: 300px;height: 300px;margin-left: -25px;" id="main"></div>
        <div style="color: #666;position: absolute;top: 35px;right: 10px;">
          <ul class="rightTitle">
            <li v-for="orderName in orderList">
              <span class="rightRadius" :style="{'background':orderName.color}"></span>
              <span>{{orderName.type}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="margin-top:120px;background: #fff;">
      <ul>
        <li class="fr" style="padding-left: 15px;margin-top: -25px;" v-for="(order,index) in orderList">
          <!-- <div style="height: 25px;" v-if="order.key=='money'&&order.isChecked"></div> -->
          <div class="totalBox" v-if="order.key=='money'" @click="toggleBtn(order)">
            <span class="borderSpan" :style="{background:order.color}"></span>
            <span class="totalTitle" style="font-size: 14px">{{order.type}}</span>
            <span class="fa r15" style="color: #fea620;">¥{{order.count}}</span>
          </div>
          <!-- 只有法币金额才有 -->
          <div style="height: 50px;background: #fff;" v-if="order.key=='money'">
            <span class="recharge" @click="$router.push({path:'/main/rechargeCard?status=1'})">充值</span>
            <span class="putForward" @click="$router.push({path:'/main/putForward'})">提现</span>
          </div>
          <div style="height: 10px;background: #f6f6f6;margin-left: -20px;" v-if="order.key=='money'"></div>
          <!-- 除法币金额外 -->
          <div class="totalBox fr" v-if="order.key!='money'" :class="{mgt10 :order.isChecked&&order.list.length>0}" @click="toggleBtn(order)">
            <span class="borderSpan" :style="{background:order.color}"></span>
            <span class="totalTitle" style="font-size: 14px">{{order.type}}</span>
            <!-- <img src="../../assets/helpLower.png" alt="" class="fa r15 " width="15" style="top: 22px;transition: all 0.5s" :class="{imgStatus:order.isChecked}"> -->
            <span class="fa r15" style="color: #fea620">¥{{order.count}}</span>
          </div>
          <div class="orderDetail" v-for="item in order.list" v-if="order.isChecked">
            <div class="orderGoods">
              <div class="orderGoods-top fr">
                <img src="../../assets/order.png" alt="" width="25" style="margin-top:10px;">
                <div class="fa" style="top: 10px;left: 50px;">
                  <span style="display: block;" class="fontSize14">{{item.name}}</span>
                  <span class="c9 fontSize11" style="font-size: 11px;color: #999">订单号:{{item.orderid}}</span>
                </div>
                <span class="fa r15 t10 ff10" :class="{green:item.status=='已赎回'||item.status=='已付款',ff1010:item.status=='挂单中'||'待赎回'||'待付款'}" style="font-size: 13px;">{{item.status}}</span>
              </div>
              <div style="position: relative;padding-bottom: 5px;">
                <div class="orderGoods-center" v-for="everyGoogs in item.rate">
                  <div class="c6" style="color: #666;font-size: 13px;">
                    {{everyGoogs.key}}:
                    <span style="color: #ff1010;font-size: 13px;orderGoods-center">{{everyGoogs.val}}</span>
                  </div>
                </div>
                <div class="orderGoods-center">
                  <div class="c6" style="color: #999;font-size: 13px;">
                    <!-- 购买时间:{{item.created.split(" ")[0]}} -->
                  </div>
                  <div class="c6" style="color: #999;font-size: 13px;">
                    到期时间:{{item.open}}
                  </div>
                </div>
                <div style="position: absolute;right: 15px;bottom: 13px;font-size:13px" v-if="item.payAmount">
                  <span>本金</span>
                  <span style="color: #ff1010">{{item.payAmount}}</span>
                </div>
              </div>
              <div class="orderGoods-bottom fr" v-if="item.btn">
                <div class="fa r15" style="font-size: 13px;">
                  <span v-for="btn in item.btn" class="span" :class="{mgr7:item.btn.length>1,ff1010bg:btn==8}">
                    <span v-if="btn==1" @click="applyPay(item.orderid)">继续支付</span>
                    <span v-if="btn==2" @click="cancelBtn(item.orderid)">取消订单</span>
                    <span v-if="btn==3" @click="registerList(item.orderid)">我要挂单</span>
                    <span v-if="btn==4" @click="registerList(item.orderid)">修改挂单</span>
                    <span v-if="btn==5" @click="revokeOrder(item.orderid)">撤销挂单</span>
                    <span v-if="btn==6" @click="continueInvest(item.orderid)">续投</span>
                    <span v-if="btn==7" @click="applyRedemption(item.orderid)">赎回</span>
                    <span v-if="btn==8" @click="transformation(item)">转套利</span>
                  </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div style="text-align: right;margin-right: 15px;z-index: 9;height: 50px;" v-if="order.key!='money'&&order.isChecked&&order.size>5">
            <span style="color: #ff1010;margin-top: 10px;" @click.stop="moreBtn(order.type,order.key)">查看更多>></span>
          </div>
        </li>
      </ul>
    </div>

    <!-- 输入支付密码 -->
    <div class="tips" v-show="showTips">
      <div class="tips-top">
        <div style="text-align: center;height: 45px;line-height: 45px;border-bottom: 1px solid #f6f6f6;">
          <img src="../../assets/close.png" alt="" width="20" @click="showTips=false">
          <span class="c3">请输入支付密码</span>
        </div>
        <div>
          <div class="tips-center">
            <li>
              <input type="password" v-model="pwd1" maxlength="1" @keyup="pay()" class="input">
            </li>
            <li>
              <input type="password" v-model="pwd2" maxlength="1" @keyup="pay()" class="input">
            </li>
            <li>
              <input type="password" v-model="pwd3" maxlength="1" @keyup="pay()" class="input">
            </li>
            <li>
              <input type="password" v-model="pwd4" maxlength="1" @keyup="pay()" class="input">
            </li>
            <li>
              <input type="password" v-model="pwd5" maxlength="1" @keyup="pay()" class="input">
            </li>
            <li>
              <input type="password" v-model="pwd6" maxlength="1" @keyup="pay()" class="input">
            </li>
          </div>
          <div class="forgetPassWord" @click="$router.push({path:'/main/forgetPay'})">忘记密码?</div>
        </div>
      </div>
    </div>
    <!-- 转套利的弹框 -->
    <div class="transformationBox" v-if="showTran">
      <div class="transformationCont">
        <div class="tranTitle">
          <div style="padding-top: 90px;font-size: 17px;">ETF指数基金转OTC套利基金全年</div>
        </div>
        <div style="padding-left: 20px">
          <div style="height: 30px;line-height: 30px;margin-top: 10px;">
            <span style="display: inline-block; width: 6px;height: 6px;border-radius: 50%; background: #000;vertical-align: middle;margin-right: 10px;"></span>
            产品名称:{{orderTran.name}}
          </div>
          <div style="height: 30px;line-height: 30px;">
            <span style="display: inline-block; width: 6px;height: 6px;border-radius: 50%; background: #000;vertical-align: middle;margin-right: 10px;"></span>
            年华收益率:{{orderTran.rate}}%
          </div>
          <div style="height: 30px;line-height: 30px;">
            <span style="display: inline-block; width: 6px;height: 6px;border-radius: 50%; background: #000;vertical-align: middle;margin-right: 10px;"></span>
            封闭周期:{{orderTran.week}}天
          </div>
          <div style="height: 30px;line-height: 30px;">
            <span style="display: inline-block; width: 6px;height: 6px;border-radius: 50%; background: #000;vertical-align: middle;margin-right: 10px;"></span>
            投资金额:{{orderid.payAmount.split("￥")[1]}}元
          </div>
          <div style="color: #ff1010;margin-bottom: 30px;">投资周期,从今日开始计息</div>
        </div>
        <div style="display: flex">
          <div style="flex: 1;text-align: center;height: 40px;line-height: 40px;border-top: 1px solid #ddd;border-right: 1px solid #ddd"
            @click="showTran=false">取消</div>
          <div style="flex: 1;text-align: center;height: 40px;line-height: 40px;border-top: 1px solid #ddd;color: #fea620" @click="confirmTran">确定</div>
        </div>
      </div>
    </div>

    <!-- 支付密码错误弹框 -->
    <div class="errTips" v-if="errTips">
      <div class="errTipsBox">
        <div class="errTips-top">
          支付密码错误,请重试!
        </div>
        <div class="errTipsBtn">
          <span class="active" @click="retry">重试</span>
          <span @click="$router.push({path:'/main/forgetPay'})">忘记密码?</span>
        </div>
        <div style="margin-left: 30px;font-size: 13px;margin-top: 5px;color: #ff1010">(说明：只能重试3次)</div>
      </div>
    </div>
    <!-- 设置支付密码 -->
    <div class="setPassWorldTips" v-if="isPassWorld" @click="isPassWorld=false">
      <div class="setPasswordText">
        <div class="setPassWorldTitle">请设置支付密码!</div>
        <div class="goPassworld" @click="$router.push({path:'/main/setPayPassword'})">立即前往</div>
      </div>
    </div>

    <!-- 挂单弹框 -->
    <div v-transfer-dom>
      <confirm v-model="show5" show-input ref="confirm5" :title="'请输入挂单金额'" @on-confirm="isTrue">
      </confirm>
    </div>
  </div>
</template>
<script>
  import { XHeader } from 'vux'
  import Vue from 'vue'
  import { VChart, VLine, VArea, VTooltip, VLegend, VBar, VPie, VGuide, VScale } from 'vux'
  import VCharts from 'v-charts'
  import VeRing from 'v-charts/lib/ring.common'
  import http from '../../service/http.js'
  import echarts from 'echarts'
  import tips from '../../service/tips.js'
  import { Confirm, Group, XSwitch, XButton, TransferDomDirective as TransferDom } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    data() {
      this.chartSettings = {
        radius: [10, 150],
        offsetY: 200,
        offsetX: 120,
        title: {
          text: 'Customized Pie',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          },
          backgroundColor: '#2c343c',
        },
      }
      return {
        showTips: false,//显示支付密码弹框
        errTips: false,//显示支付错误弹框
        isPassWorld: false,//判断有没有支付密码
        status: 5,//全部
        order: [],
        pwd: "",
        pwd1: "",
        pwd2: "",
        pwd3: "",
        pwd4: "",
        pwd5: "",
        pwd6: "",
        orders: "",
        all: "",
        map: {},
        colorsBox: [],
        data: [],
        orderList: [],
        show5: false,
        gdMoney: '',
        gdId: "",
        showTran: false,
        orderTran: "",
        orderid: "",
      }
    },
    mounted() {
      this.hbAmount = this.$route.query.amount;
      var txts = document.querySelectorAll(".input");
      for (var i = 0; i < txts.length; i++) {
        var t = txts[i];
        t.index = i;
        t.setAttribute("readonly", true);
        t.onkeyup = function () {
          this.value = this.value.replace(/^(.).*$/, '$1');
          var next = this.index + 1;
          if (next > txts.length - 1) return;
          txts[next].removeAttribute("readonly");
          txts[next].focus();
        }
      }
      txts[0].removeAttribute("readonly");
      this.getOrder();
    },
    watch: {
      // dataBox: {

    },
    methods: {
      // 确认转换
      confirmTran() {
        http.post("/order/transfer", {
          orderid: this.orderid.orderid
        }).then(res => {
          if (res.status == 200) {
            this.showTran = false;
            tips.tips(res.data.msg);
          } else {
            debugger
            tips.tips(res.data.msg)
          }
        }).catch(res => {
          debugger
          tips.tips(res.data.msg)
        })
      },
      // 转套利
      transformation(orderTran) {
        this.showTran = true;
        this.orderid = orderTran;
        http.get("/product/detail?pid=20170003").then(res => {
          if (res.status == 200) {
            this.orderTran = res.data.body;
          }
        })
      },
      isTrue(value) {
        this.gdMoney = value
        this.show5 = false;
        http.post("/order/putOrder", {
          orderid: this.gdId,
          putAmount: this.gdMoney
        }).then((res) => {
          if (res.status == 200) {
            tips.tips(res.data.msg);
          } else {
            tips.tips(res.data.msg)
          }
        }).catch((res) => {
          tips.tips(res.data.msg)
        })
      },
      moreBtn(type, key) {
        this.$router.push({ path: '/main/moreOrder?type=' + type + "&key=" + key })
      },
      toggleBtn(item) {
        item.isChecked = !item.isChecked
      },
      getOrder() {
        http.get("/order/orders").then((res) => {
          if (res.data.status == 200) {
            this.orderList = res.data.body.orders;
            this.all = res.data.body.all;
            var total = 0;
            res.data.body.orders.forEach((v) => {
              this.colorsBox.push(v.color)
              total += v.count;
              Vue.set(v, 'isChecked', false)
            })
            var arr = []
            res.data.body.orders.forEach((v, index) => {
              arr.push({
                'name': v.type,
                'value': v.count,
              })
            })
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              color: this.colorsBox,
              series: [
                {
                  name: '',
                  type: 'pie',
                  radius: '45%',
                  center: ['40%', '30%'],
                  data: arr,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal: {
                      label: {
                        show: false   //隐藏标示文字
                      },
                      labelLine: {
                        show: false   //隐藏标示线
                      }
                    }
                  }
                }
              ]
            };
            myChart.setOption(option);
          }
        })
      },
      pay() {
        if (this.pwd1 && this.pwd2 && this.pwd3 && this.pwd4 && this.pwd5 && this.pwd6) {
          this.pwd = util.md5(this.pwd1 + this.pwd2 + this.pwd3 + this.pwd4 + this.pwd5 + this.pwd);
          http.post("/user/authPay", {
            payPwd: this.pwd
          }).then((res) => {
            if (res.data.status == 200) {
              // 密码成功之后进行下单;
              http.post("/order/payOrder", {
                orderid: this.id,
              }).then((res) => {
                if (res.data.status == 200) {
                  this.payOrder()
                }
              })
            } else {
              this.showTips = false;
              this.errTips = false;
              this.isPassWorld = true;
              // tips.tips(res.data.msg);
              this.pwd1 = "";
              this.pwd2 = "";
              this.pwd3 = "";
              this.pwd4 = "";
              this.pwd5 = "";
              this.pwd6 = "";
            }
          }).catch((res) => {
            this.showTips = false;
            this.errTips = false;
            this.isPassWorld = false;
            this.pwd1 = "";
            this.pwd2 = "";
            this.pwd3 = "";
            this.pwd4 = "";
            this.pwd5 = "";
            this.pwd6 = "";
            tips.tips(res.data.msg);
          })
        }
      },
      continueInvest(id) {
        http.post("/order/goOrder", {
          orderid: id
        }).then((res) => {
          if (res.data.status == 200) {
            tips.tips(res.data.msg)
          } else {
            tips.tips(res.data.msg)
          }
        }).catch((res) => {
          tips.tips(res.data.msg)
        })
      },
      // 取消
      cancelBtn(id) {
        tips.tips("30分钟后会自动取消订单")
      },
      // 继续支付
      applyPay(id) {
        this.id = id;
        //判断是否有支付密码
        http.post('/user/hasPay', {
          username: window.localStorage.getItem("login.username")
        }).then((res) => {
          if (res.data.status == 200 && res.data.body) {
            this.showTips = true;
          } else if (res.status == 200 && !res.data.body) {
            this.isPassWorld = true;
          }
        })
      },
      checkPwd() {
        this.pwd = this.pwd1 + this.pwd2 + this.pwd3 + this.pwd4 + this.pwd5 + this.pwd6;
        if (this.pwd1 && this.pwd2 && this.pwd3 && this.pwd4 && this.pwd5 && this.pwd6) {
          http.post('/user/authPay', {
            payPwd: util.md5(this.pwd)
          }).then((resultData) => {
            if (resultData.data.status == 200 && resultData.data.body) {//支付密码正确 如果是余额支付 调用付款的接口
              if (this.radioFlags[0] || this.hbAmount) {
                this.payOrder()
              } else {
                this.showTips = false;
                this.errTips = false;
                this.isPassWorld = false;
                this.pwd1 = ""
                this.pwd2 = ""
                this.pwd3 = ""
                this.pwd4 = ""
                this.pwd5 = ""
                this.pwd6 = ""
                tips.tips('下单成功，请去银联官网支付');
              }
            } else {
              this.showTips = false;
              this.errTips = false;
              this.isPassWorld = false;
              this.pwd1 = ""
              this.pwd2 = ""
              this.pwd3 = ""
              this.pwd4 = ""
              this.pwd5 = ""
              this.pwd6 = ""
              tips.tips(resultData.data.msg);
            }
          }).catch((resultData) => {
            this.showTips = false;
            this.errTips = false;
            this.isPassWorld = false;
            this.pwd1 = ""
            this.pwd2 = ""
            this.pwd3 = ""
            this.pwd4 = ""
            this.pwd5 = ""
            this.pwd6 = ""
            tips.tips(resultData.data.msg);
          })
        }
      },
      // 支付
      payOrder() {
        http.post("/order/payOrder", {
          orderid: this.orderid
        }).then((resPay) => {
          if (resPay.data.status == 200) {
            this.$router.push({ path: "successPay", query: { pid: this.id } })
          } else {
            tips.tips(resPay.data.msg);
          }
        }).catch((resPay) => {
          tips.tips(resPay.data.msg);
        })
      },
      // 赎回
      applyRedemption(id) {
        http.post('/order/backOrder', {
          orderid: id
        }).then((res) => {
          if (res.data.status == 200) {
            tips.tips(res.data.msg);
            this.getOrder();
          } else {
            tips.tips(res.data.msg)
          }
        }).catch((res) => {
          tips.tips(res.data.msg)
        })
      },
      // 修改挂单 我要挂单
      registerList(id) {
        this.gdId = id;
        this.show5 = true;
      },
      //取消挂单
      revokeOrder(id) {
        http.post("/order/cancelPut", {
          orderid: id
        }).then((res) => {
          if (res.data.status == 200) {
            tips.tips(res.data.msg);
            this.getOrder();
          } else {
            tips.tips(res.data.msg)
          }
        }).catch((res) => {
          tips.tips(res.data.msg)
        })
      },
      setStatus5() {
        this.status = 5;
        var url = '/order/orderList'
        http.get(url).then((res) => {
          if (res.data.status == 200) {
            this.order = res.data.body;
          }
        })
      },
      setStatus(status) {
        this.status = status;
        this.getOrderList(status);
      },
      getOrderList(status) {
        var url = "/order/orderList?status=" + status
        http.get(url).then((res) => {
          if (res.data.status == 200) {
            this.order = res.data.body;
          }
        })
      }
    },
    components: {
      XHeader,
      // VeRing
      VChart,
      VLine,
      VArea,
      VTooltip,
      VLegend,
      VBar,
      VPie,
      VGuide,
      VScale,
      VeRing,
      Confirm,
      Group,
      XSwitch,
      XButton
    }
  }
</script>
<style lang="less">
  .totalAssets .vux-header {
    background: linear-gradient(left, #fed72e, #fea710);
    background: -webkit-gradient(linear, left top, right top, from(#fed72e), to(#fea710));
  }

  /* body {
    background: #f6f6f6;
  } */

  .totalAssets .mgr7 {
    margin-right: 5px;
  }

  .totalAssets .t10 {
    top: 10px;
  }

  .totalAssets .noselect {
    width: auto !important;
    height: 200px !important;
    margin-left: -150px !important;
    margin-top: 5px !important;
  }

  .totalAssets .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  .totalAssets .ff1010 {
    color: #ff1010;
  }

  .totalAssets .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .c3 {
    color: #333;
    font-size: 14px;
  }

  .fr {
    position: relative;
  }

  .fa {
    position: absolute;
  }

  .r15 {
    right: 15px;
  }

  .totalAssets .imgStatus {
    transform: rotate(180deg);
    transition: all 0.5s;
  }

  .totalAssets .total {
    height: 160px;
    background: linear-gradient(left, #fed72e, #fea710);
    background: -webkit-gradient(linear, left top, right top, from(#fed72e), to(#fea710));
    text-align: center;
    color: #fff;
    padding: 0px 15px;
  }

  .totalAssets .garden {
    background: #fff;
    height: 200px;
    box-shadow: 1px 3px 5px 1px #e4e4e4;
    overflow: hidden;
  }

  .totalAssets .garden .ve-ring canvas {
    position: absolute;
    left: 0px;
    top: -17px !important;
    width: 192px !important;
    height: 200px !important;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0px;
    margin: 0px;
    border-width: 0px;
  }

  .totalAssets .assetsMoney li div .liTitle {
    list-style: none;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f6f6f6;
    padding-left: 15px;
    padding-right: 15px;
  }

  .totalAssets .borderSpan {
    width: 2px;
    height: 20px;
    background: red;
    display: inline-block;
    margin-top: 5px;
    position: absolute;
    top: 10px;
  }

  .totalAssets .totalTitle {
    position: absolute;
    left: 10px;
  }

  .totalAssets .rightTitle li {
    list-style: none;
    width: 120px;
    text-align: left;
    font-size: 13px;
  }

  .totalAssets .rightRadius {
    width: 10px;
    height: 10px;
    background: red;
    display: inline-block;
    border-radius: 50%;
  }

  .totalAssets .totalBox {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px dashed #f6f6f6;
    border-top: 1px dashed #f6f6f6;
    position: relative;
    z-index: 9;
  }

  .totalAssets .totalContent {
    height: 50px;
    line-height: 50px;
    position: absolute;
    right: 15px;
  }

  .totalAssets .recharge,
  .totalAssets .putForward {
    width: 65px;
    font-size: 13px;
    background: #ff5757;
    text-align: center;
    color: #fff;
    height: 25px;
    line-height: 25px;
    display: inline-block;
    border-radius: 5px;
    margin-top: 12px;
    position: absolute;
    right: 90px;
  }

  .totalAssets .putForward {
    background: #7ed321;
    right: 15px;
  }

  .totalAssets .orderDetail {
    padding: 0px;
    padding-right: 10px;
    margin-top: 10px;
  }

  .totalAssets .orderGoods {
    background: #fff;
    border-radius: 15px;
    margin-bottom: 15px;
    border: 1px solid #f6f6f6;
  }

  .totalAssets .orderGoods-top {
    padding-left: 15px;
    height: 65px;
    border-bottom: 1px solid #f6f6f6;
  }

  .totalAssets .orderGoods-center {
    padding-left: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    div {
      height: 25px;
      line-height: 25px;
    }
  }

  .totalAssets .orderGoods-bottom {
    height: 55px;
    line-height: 55px;
    border-top: 1px solid #f6f6f6;
    .span {
      height: 25px;
      line-height: 25px;
      border-radius: 25px;
      display: inline-block;
      border: 1px solid #999;
      color: #999;
      width: 75px;
      text-align: center;
    }
  }

  .totalAssets .orderGoods-bottom .pay {
    background: #fea620;
    color: #fff !important;
    border: 1px solid #fea620 !important;
  }

  .totalAssets .green {
    color: #88d731 !important;
  }

  .totalAssets .payPassword {
    /* background: #000; */
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    /* opacity: 0.3; */
    z-index: 9999;
    background: rgba(0, 0, 0, 0.3);
  }

  .totalAssets .continuePay {
    position: fixed;
    top: 40%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #fff;
  }

  .totalAssets .tips {
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 9;
    .tips-top {
      position: absolute;
      top: 40%;
      height: 60%;
      background: #fff;
      width: 100%;
      border-bottom: 1px solid #f6f6f6;
      img {
        position: absolute;
        left: 15px;
        top: 15px;
      }
    }
  }

  .totalAssets .tips-center {
    padding-left: 10%;
    margin-top: 45px;
  }

  .totalAssets .tips-center li {
    float: left;
    width: 15%;
    list-style: none;
    height: 45px;
    line-height: 45px;
    border: 1px solid #ccc;
    border-right: none;
    overflow: hidden;
    text-align: center;
    input {
      border: none;
      outline: none;
      height: 45px;
      line-height: 45px;
      width: 100%;
      display: block;
      text-align: center;
    }
  }

  .totalAssets .tips-center li:last-child {
    border-right: 1px solid #ccc;
  }

  .totalAssets .forgetPassWord {
    position: absolute;
    right: 28px;
    top: 150px;
    color: #fea620;
  }

  .totalAssets .errTips {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9;
  }

  .totalAssets .errTipsBox {
    position: absolute;
    top: 40%;
    width: 90%;
    height: 130px;
    background: #fff;
    margin-left: 5%;
    border-radius: 15px;
    .errTips-top {
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid #efefef;
    }
    .errTipsBtn {
      span {
        display: inline-block;
        width: 48%;
        text-align: center;
        margin-top: 15px;
        color: #fea620;
      }
      .active {
        border-right: 1px solid #efefef;
      }
    }
  }

  .totalAssets .setPassWorldTips {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9;
  }

  .totalAssets .setPasswordText {
    position: absolute;
    top: 40%;
    height: 130px;
    background: #fff;
    width: 90%;
    margin-left: 5%;
    border-radius: 15px;
    .setPassWorldTitle {
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid #efefef;
      color: #000;
    }
    .goPassworld {
      height: 70px;
      line-height: 65px;
      color: #fea620;
      text-align: center;
    }
  }

  .totalAssets .mgt10 {
    margin-top: 25px;
  }

  .backProduct {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 9;
    color: #fff;
  }

  .transformationBox {
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 30px;
    z-index: 9999999;
  }

  .transformationCont {
    background: #fff;
    border-radius: 10px;
    margin-top: 10%;
  }

  .tranTitle {
    background-image: url("../../assets/tranbg.png");
    text-align: center;
    color: #fff;
    height: 140px;
    background-size: 100%;
  }

  .tranbg {
    background: #4392EE !important;
    color: #fff !important;
    border: none !important;
  }

  .ff1010bg {
    background: #ff1010 !important;
    color: #fff !important;
    border: none !important
  }
</style>